<template>
    <div style="width: 100%;height: 100%;" ref="mapbox">

    </div>
</template>

<script setup lang='ts'>
import * as echarts from 'echarts'
import { getmap } from '../request/api';
import { onMounted, ref } from 'vue'
let mapbox = ref()

let myChart

let mapArr = [{
    adcode: 100000,
    name: '中国'
}]

let fun = (adcode, name) => {
    getmap(adcode).then(res => {
        console.log(res)
        myChart = echarts.init(mapbox.value);
        echarts.registerMap(name, res.data);
        let option = {
            tooltip: {
                trigger: 'item',
                formatter: '{b}<br/>{c} (p / km2)'
            },
            // visualMap: {
            //     min: 8,
            //     max: 50,
            //     text: ['High', 'Low'],
            //     realtime: false,
            //     calculable: true,
            //     inRange: {
            //         color: ['lightskyblue', 'yellow', 'orangered']
            //     }
            // },
            // 地图散点
            // geo 地理坐标系组件
            geo: {
                // map  使用 registerMap 注册的地图名称
                map: name,
                // geo.label  图形上的文本标签
                label: {
                    // geo. emphasis  高亮状态下的多边形和标签样式。
                    emphasis: {
                        show: false
                    }
                }
            },
            series: [
                {
                    // series-effectScatter    带有涟漪特效动画的散点（气泡）图。利用动画特效可以将某些想要突出的数据进行视觉突出
                    type: 'effectScatter',
                    // 坐标系
                    coordinateSystem: 'geo',//使用地理坐标系geo
                    // 散点坐标
                    data: [
                        [120.13, 33.38],
                        [118.87, 42.28],
                        [120.33, 36.07],
                    ]
                },

                {

                    name: name,
                    type: 'map',
                    // map的name与 echarts.registerMap中的name相同
                    map: name,
                    label: {
                        show: true
                    },
                    // 地图标注
                    markPoint: {
                        data: res.data.features.map(item => {
                            return {
                                name: item.properties.name,
                                coord: item.properties.center,
                            }
                        })
                    },
                    // 接口中的数据替换原本的data
                    data: res.data.features.map((item) => {
                        return {
                            adcode: item.properties.adcode,
                            name: item.properties.name,
                            value: item.properties.childrenNum
                        }
                    })
                }
            ]
        }
        // 重新渲染地图
        myChart.setOption(option)

        myChart.off('click', onclick)
        // myChart.off('contextmenu', oncontextmenu)

        myChart.on('click',(e:any)=>{
            console.log(e,11111)
            let {adcode,name}=e.data
            fun(adcode,name)
        })

        // myChart.on('contextmenu', function (e:any) {
        //     console.log(e)
        //     mapArr.pop()
        //     let { adcode, name } = mapArr[mapArr.length - 1]
        //     fun(adcode, name)
        // })
    })
}

onMounted(() => {
    fun(100000, '中国')
})


</script>

<style></style>